import React, { Component } from 'react';

import Header from '../../core/components/header';
import Table from '../../core/components/table';
import FormSelect from '../../core/components/form.select';
import FormInput from '../../core/components/form.input';
import { PostString } from '../../core/utils/fetch';
import Dialog from '../../core/utils/dialog';

class BuyBack extends Component {

    static defaultProps = {
        endDateDataList: [
            { value: '', name: '全部' },
            { value: '15', name: '近15天' },
        ],
        status: [
            { value: '', name: '全部' },
            { value: 'SUBSCRIBED', name: '已认购' },
            { value: 'DEPOSITED', name: '已回购' },
            { value: 'PRE_DEPOSIT', name: '提前回购' },
        ],
    };

    state = {
        searchData: {
            name: '',
            endDate: this.props.endDateDataList[1].value,
            status: this.props.status[0].value,
        },
    };

    render() {
        let columns = [
            { title: '序号', name: 'id' },
            { title: '姓名', name: 'custName' },
            { title: '联系方式', name: 'phone' },
            { title: '投资产品', name: 'productId.name' },
            { title: '投资金额', name: 'investNum' },
            { title: '年化收益率', name: 'rate' },
            { title: '认购日期', name: 'calRateBeginDate', type: 'date' },
            { title: '回购日期', name: 'calRateEndDate', type: 'date' },
            { title: '状态', render: this.renderAduit },
            { title: '上传人', name: 'creatorName' },
            { title: '上传时间', name: 'createTime', type: 'date' },
            { title: '操作', render: this.renderOpertion },
        ];
        let { searchData } = this.state;
        return (
            <div>
                <Header title="回购列表" subTitle="BuyBack Manage"></Header>

                <div className="row">
                    <div className="col-lg-12">
                        <FormSelect
                            className="pull-left"
                            labelClassName="pull-left"
                            selectClassName="col-lg-3 left-select"
                            label="结束时间"
                            name="endDate"
                            dataItem={searchData}
                            dataList={this.props.endDateDataList}>
                        </FormSelect>
                    </div>
                </div>
                <div className="row">
                    <div className="col-lg-12">
                        <FormInput
                            className="pull-left"
                            labelClassName="pull-left"
                            inputClassName="col-lg-3 left-select"
                            label="姓名"
                            name="name"
                            dataItem={searchData}>
                        </FormInput>
                        <FormSelect
                            className="pull-left"
                            labelClassName="pull-left"
                            selectClassName="col-lg-3 left-select"
                            label="状态"
                            name="status"
                            dataItem={searchData}
                            dataList={this.props.status}>
                        </FormSelect>
                        <button type="button" className="btn btn-sm btn-primary pull-left" style={{ marginLeft: '10px' }} onClick={this._search}>查询</button>
                    </div>
                </div>

                <Table
                    ref="table"
                    url={`/spi/custInvest/depositList?endDate=${searchData.endDate}&name=${searchData.name}&status=${searchData.status}`}
                    columns={columns}>
                </Table>
            </div>
        );
    }

    renderAduit = (dataItem) => {
        // switch (dataItem.auditInvestStatus) {
        //     case "SUBMITTING":
        //         return "待提交";
        //     case "AUDITING":
        //         return "待审核";
        //     case "AUDIT_PASS":
        //         return "审核通过";
        //     case "AUDIT_REJECT":
        //         return "审核不通过";
        //     default:
        //         return `未知状态-${dataItem.auditInvestStatus}`
        // }
        switch (dataItem.investStatus) {
            case "SUBSCRIBED":
                return "已认购";
            case "DEPOSITED":
                return "已回购";
            case "PRE_DEPOSIT":
                return "提前回购";
            default:
                return `未知状态-${dataItem.investStatus}`
        }
    };


    renderOpertion = (dataItem) => {
        return (
            <div>
                <a onClick={() => this._onEdit(dataItem)}>修改状态</a>
            </div>
        );
    }

    _onEdit = (dataItem) => {
        window.bootbox.prompt({
            title: "修改状态",
            inputType: 'radio',
            inputOptions: [
                {
                    text: '已认购',
                    value: 'SUBSCRIBED',
                },
                {
                    text: '已回购',
                    value: 'DEPOSITED',
                },
                {
                    text: '提前回购',
                    value: 'PRE_DEPOSIT',
                }
            ],
            opened: (box) => {
                box.find(`input[value='${dataItem.investStatus}']`).attr('checked', 'checked');
            },
            callback: (result) => {
                if (result) {
                    PostString(`/spi/custInvest/checkInvestStatus?id=${dataItem.id}&status=${result}`)
                        .then(() => {
                            Dialog.alert('修改成功', () => {
                                this.refs.table.refresh();
                            });
                        });
                }
            }
        });
    };

    _search = () => {
        let { searchData } = this.state;
        this.setState({ searchData });
    };
}

export default BuyBack;